<template>
	<view style="background-color: #f0f0f5;height: 100vh;">


		<u-tabs :list="tabList" :currrent='currrentTab' @change='changeTab'></u-tabs>

		<view v-show="currentTab==0">
			<view class="order-title">
				<view class="">
					<text>销售数量：</text><text>{{totalNum}}</text><text>张</text>
				</view>
				<view class="">
					<text>销售总额：</text><text style="color: red;">{{totalMoneny}}</text><text>元</text>
				</view>
			</view>
			<view class="order-list" v-if="orderList.length">
				<view class="list-item" style="border-bottom: 1px solid #f0f0f5;">
					<view class="item">
						<text>全名称/数量</text>
						<text>分销金额</text>
					</view>
				</view>
				<view v-for="(item,index) in orderList" class="list-item" v-if="item.policyId" :key="index">
					<view class="item">
						<text>{{item.policyName}}：<text>{{item.saleNum}}</text>张</text>
						<text>金额：{{item.saleValue*item.saleNum}}元</text>
					</view>
				</view>
				<view class="cash-btn">
					<u-button shape="circle" type="primary" @click="withDraw">申请提现</u-button>
				</view>
			</view>
			<view class="no-data" v-else>
				<text>暂无分销详情</text>
			</view>

		</view>
		<view v-show="currentTab==1">
			<view v-if="withdrawRecord.length">
				<view v-for="item in withdrawRecord" :key="item.id"
					style="background-color: #fff;margin-bottom: 20rpx;">
					<view class="case-record-title">
						<text>提现时间：{{item.createTime}}</text>
						<text>{{caseStatus(item.flag)}}</text>
					</view>
					<view class="case-record">
						<text>券名称：{{item.policyName}}</text>
						<text>手机号：{{item.phone}}</text>
					</view>
					<view class="case-record">
						<text>数量：{{item.saleNum}}</text>
						<text>金额：{{item.saleNum*item.saleValue}}</text>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<text>暂无分销详情</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		withdrawCash,
		getSaleOrders,
		getWithdrawRecord
	} from '../../common/http/api.js'
	export default {
		data() {
			return {
				orderList: [],
				totalNum: 0,
				totalMoneny: 0,
				phone: '',
				withdrawRecord: [],
				tabList: [{
					name: '分销记录'
				}, {
					name: '提现记录'
				}],
				currentTab: 0
			};
		},
		methods: {
			changeTab(e) {
				this.currentTab = e.index
			},
			getOrders() {
				getSaleOrders(this.phone).then(res => {
					const {
						code,
						obj
					} = res
					if (code === "000") {
						this.orderList = obj
						obj.map(item => {
							if (item.policyName) {
								this.totalNum += parseInt(item.saleNum)
								this.totalMoneny += parseInt(item.saleNum) * parseFloat(item.saleValue);
							}
						})
						this.totalMoneny = this.totalMoneny.toFixed(2)
					}
				})
			},
			withDraw() {
				uni.showModal({
					content: "确认提现本次分销",
					success: (res) => {
						if (!res.confirm) return
						withdrawCash({
							coupons: this.orderList,
							phone: this.phone
						}).then(res => {
							if (res.code === "000") {
								uni.showToast({
									title: "提现成功,等待汇款",
									icon: "none",
									duration: 1500
								})
								this.show = false;
								this.getOrders();
							} else if (res.code === "001") {
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1500
								})
							} else {
								uni.showToast({
									title: "提现失败",
									icon: "none",
									duration: 1500
								})
							}
						})
					}
				})
			},
			getWithdrawRecord() {
				getWithdrawRecord(this.phone).then(res => {
					console.log(res);
					const {
						code,
						obj
					} = res
					if (code === "000") {
						this.withdrawRecord = obj
					}
				})
			}
		},
		onLoad(options) {
			this.phone = options.phone

			this.getOrders()
			this.getWithdrawRecord()
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		computed: {
			caseStatus() {
				return flag => {
					if (flag === "1") {
						return "提现中";
					} else if (flag === "2") {
						return "已汇款";
					}
				};
			},
		}
	}
</script>

<style lang="scss">
	.order-title {
		// width: 100vw;
		border-bottom: 1px solid #f0f0f5;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
	}

	.no-data {
		width: 100vw;
		text-align: center;

		text {
			line-height: 140rpx;
			font-size: 26rpx;
			color: #999;
		}

	}

	.order-list {
		background-color: #f0f0f5;

		.item {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			margin: auto;

			text {
				line-height: 60rpx;
				flex: 1;
				text-align: center;
			}
		}
	}

	.cash-btn {
		width: 100vw;
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
		box-sizing: border-box;
		padding: 0 60rpx;
	}

	.case-record-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #999;
		border-bottom: 1px solid #f0f0f5;

	}

	.case-record {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #999;
	}
</style>